<template>
	<div class="Icons-pics">
		<ul>
			<li v-for="item in pics" :key="item.id" class="pics" >
				<router-link to="/">
					<img :src="item.src">
					<p>{{item.name}}</p>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	// 导出
	export default {
		name : 'Icons',
		data()
		{
			return {
				pics : [
						{ id : 1 , src : 'img/icon01.png' , name : '国内游' },
						{ id : 2 , src : 'img/icon02.png' , name : '住宿' },
						{ id : 3 , src : 'img/icon03.png' , name : '境外游' },
						{ id : 4 , src : 'img/icon04.png' , name : '海岛度假' },
						{ id : 5 , src : 'img/icon05.png' , name : '国外游' },
						{ id : 6 , src : 'img/icon06.png' , name : '出行方式' },
						{ id : 7 , src : 'img/icon07.png' , name : '周边游' },
						{ id : 8 , src : 'img/icon08.png' , name : '户外游' }
						],
			}
		}
	}
</script>

<style scoped >
	a
	{
		text-decoration: none;
	}
	.Icons-pics
	{
		width: 100%;
		overflow: hidden;
		border-bottom: 0.03rem solid #d4d4d4;
	}
	.Icons-pics img
	{
		width: 1.2rem;
		height: 50%;
	}
	.Icons-pics li
	{
		width: 25%;
		text-align: center;
		margin-top: 0.5rem;
		float: left;
	}
	.Icons-pics p
	{
		text-align: center;
		padding-top: 0.5rem;
		color: black;
		padding-bottom: 0.5rem;
	}
</style>
